<template>
	<view class="my-tab flex">
		<view class="" @click="handleToHome">
			<image class="my-tab-img" :src="activeTab==='home'?'../static/images/tab/home_active.png':'../static/images/tab/home.png'" mode=""></image>
			<view class=""><text :class="{'active':activeTab==='home'}">首页</text></view>
		</view>
		<view class="" @click="handleToCategory">
			<image class="my-tab-img" :src="activeTab==='category'?'../static/images/tab/category_active.png':'../static/images/tab/category.png'" mode=""></image>
			<view class=""><text :class="{'active':activeTab==='category'}">分类</text></view>
		</view>
		<view class="" @click="handleToHome">
			<image class="my-tab-img" src="../static/images/add.png" mode=""></image>
			<view class=""><text :class="{'active':activeTab==='add'}">发布</text></view>
		</view>
		<view class="" @click="handleToCollection">
			<image class="my-tab-img" :src="activeTab==='collection'?'../static/images/tab/collection_active.png':'../static/images/tab/collection.png'" mode=""></image>
			<view class=""><text :class="{'active':activeTab==='collection'}">收藏</text></view>
		</view>
		<view class="" @click="handleToMini">
			<image class="my-tab-img" :src="activeTab==='mini'?'../static/images/tab/mini_active.png':'../static/images/tab/mini.png'" mode=""></image>
			<view class=""><text :class="{'active':activeTab==='mini'}">我的</text></view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 响应式当前活动 Tab
const activeTab = ref<'home' | 'category' | 'add' | 'collection' | 'mini'>('home');
const handleToHome = () => {
	activeTab.value='home'
	uni.switchTab({
		url:"/pages/home/home"
	})
	 
}
const handleToMini = () => {
	activeTab.value='mini'
	uni.switchTab({
		url:"/pages/mini/mini"
	})
}
const handleToCategory = () => {
	activeTab.value='category'
	uni.switchTab({
		url:"/pages/category/category"
	})
}
const handleToCollection = () => {
	activeTab.value='collection'
	uni.switchTab({
		url:"/pages/collection/collection"
	})
}
</script>

<style lang="scss">
.my-tab{
	height: 100upx;
	justify-content: space-between;
	text-align: center;
	background-color: #fff;
	padding: 10upx 40upx;
	.my-tab-img{
		height: 48upx;
		width: 48upx;
	}
	text{
		font-size: 12rpx;
	}
	
}
active{
	color:#FD7753;
}   
</style>
